import { defineComponent, Fragment, ref, onMounted, reactive, onBeforeMount } from 'vue'
import { Viewer } from '@photo-sphere-viewer/core'
import '@photo-sphere-viewer/core/index.css'
// 标记
import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin'
import '@photo-sphere-viewer/markers-plugin/index.css'
// 多张图片
import { GalleryPlugin } from '@photo-sphere-viewer/gallery-plugin'
import '@photo-sphere-viewer/gallery-plugin/index.css'
// 虚拟游览
// import { VirtualTourPlugin } from '@photo-sphere-viewer/virtual-tour-plugin'
// import '@photo-sphere-viewer/virtual-tour-plugin/index.css'
// 自动旋转, 简介动画
import { AutorotatePlugin } from '@photo-sphere-viewer/autorotate-plugin'
// 陀螺仪
import { GyroscopePlugin } from '@photo-sphere-viewer/gyroscope-plugin'
// 罗盘
import { CompassPlugin } from '@photo-sphere-viewer/compass-plugin'
import '@photo-sphere-viewer/compass-plugin/index.css'

import { getPreview, getMarkers } from '@/network/preview'
import Drawer from '@/components/Drawer/index.vue'


const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/'
export default defineComponent({
  setup () {
    const viewerRef = ref() // 全景图片元素 ref 对象
    const imageData = reactive([]) // 图片数据
    const imageID = ref('') // 图片ID
    const show = ref(false) // 抽屉显示隐藏
    const markData = reactive({}) // 标记数据

    // 获取图片数据
    const getData = () => {
      getPreview({ pageIndex: 1, pageSize: 9999 }).then(res => {
        console.log(res.data.list)
        imageID.value = res.data.list[0].id
        getMarkData()
      })
    }
    // 获取图片标记
    const getMarkData = () => {
      getMarkers({ pageIndex: 1, pageSize: 9999, mapId: imageID.value }).then(res => {
        console.log(res.data.list)
      })
    }
    // 设置全景图
    const setPhotoView = () => {
      const viewer = new Viewer({
        container: viewerRef.value,
        panorama: 'https://photo-sphere-viewer-data.netlify.app/assets/sphere.jpg',
        caption: '第一', // 导航栏标题
        defaultYaw: 0, // 初始水平角度
        defaultPitch: 0, // 初始垂直角
        // fisheye: true, // 鱼眼开关
        minFov: 10,
        plugins: [[GalleryPlugin, {
          visibleOnLoad: true,
          hideOnClick: false
        }],
        // [VirtualTourPlugin, {
        //   positionMode: 'gps',
        //   renderMode: '3d',
        //   nodes: nodes,
        //   startNodeId: '1'
        // }],
        [AutorotatePlugin, {
          autorotatePitch: null,
          autorotateSpeed: '1rpm'
        }],
        [GyroscopePlugin, [CompassPlugin, {
          hotspots: [
            { yaw: '45deg' },
            { yaw: '60deg', color: 'red' },
          ]
        }]],
        [MarkersPlugin, {
          markers: [
            {
              id: 'mark-1',
              position: { yaw: 0.32, pitch: 0.11 },
              image: baseUrl + 'pictos/pin-blue.png',
              size: { width: 32, height: 32 },
              tooltip: 'A image marker. <b>Click me!</b>',
              clickEventOnMarker: true
            },
            {
              id: 'mark-2',
              position: { yaw: 0.1, pitch: 0.2 },
              image: baseUrl + 'pictos/pin-blue.png',
              size: { width: 32, height: 32 },
              tooltip: 'A image marker. <b>Click me!</b>',
              clickEventOnMarker: true
            },
          ],
        }]]
      })
      // 标记实例
      const markersPlugin = viewer.getPlugin(MarkersPlugin)
      // 标记点击事件
      markersPlugin.addEventListener('select-marker', (e: any) => {
        console.log(e.marker.config)
        show.value = true
      })

      const gallery: any = viewer.getPlugin(GalleryPlugin) // 多张照片实例
      gallery.setItems([{
        id: 'sphere',
        panorama: baseUrl + 'sphere.jpg',
        thumbnail: baseUrl + 'sphere-small.jpg',
        name: '山', // 图片的名称
        options: {
          caption: '第一'
        }
      }, {
        id: 'key-biscayne',
        panorama: baseUrl + 'tour/key-biscayne-1.jpg',
        thumbnail: baseUrl + 'tour/key-biscayne-1-thumb.jpg',
        name: '海',
        options: {
          caption: '第二'
        }
      }])
      // 获取画廊的点击事件
      const container: any = document.querySelectorAll('.psv-gallery-item')
      container.forEach((item: any, index: number) => {
        item.addEventListener('click', () => {
          console.log(index)
        })
      })
    }
    onMounted(() => {
      setPhotoView()
    })

    onBeforeMount(() => {
      getData()
    })
    return () => (
      <Fragment>
        <div id="viewer" ref={viewerRef} style="width: 100vw; height: 100vh;"></div>
        <Drawer isOpen={show.value} data={markData} />
      </Fragment>
    )
  }
})
